"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import $ from "jquery";
import _ from "lodash";
import IScroll from "./iscroll.jsx";

import { CONFIG } from "../common/config.js";
import { GOTOMixin, HighChartMixin } from "./mixins.jsx";
import {doughNut2DConfig,lineConfig, pie2DConfig, getColors} from "../common/chartconfig.js";
import {ClientDetailActions} from "../action/clientaction.js";
import {ClientDetailStore} from "../store/clientstore.js";
import { curDate, getISODate, getISODatetime, getDateStartEndByType, getDateObj, getWeekOfMonth, getWeekNumber} from "../common/datehelper.js";
import { getQuarter } from "../common/datehelper.js";
import { Ranking } from "../common/rank.jsx";
import { numFixed, unitFormat } from "../common/numberformat.js";
import { sliceNoNull, loadingCheckChart1 } from "./common.jsx";
import { getLastTradingDay } from "../store/common.js";
import { CVCalendar, CVCalendarMonth } from "../common/calendar.jsx";
const DAY = 9;

var zbCal = function(dataArray, params){
	// 占比计算
	// sign 传入一个标记， 用于特殊数据处理
	// className: 指定 css 类名
	// colors: 指定 label 颜色
	// dataArray 示例：
	// [{"label": "两融成交量", "value": 460000000000, "vdate": 1430150400000 },
    //  {"label": "传统成交量", "value": 500000000000, "vdate": 1430150400000 },
 	//  {"label": "两融成交量", "value": 460000000000, "vdate": 1430160400000 },
	//  {"label": "传统成交量", "value": 500000000000, "vdate": 1430160400000 }, ]
	params = (params == null? {}: params);
	var sign = params['sign'];
	var className = params['className'];
	var colors = params['colors'];
	var decimal = params['decimal'];
	decimal = (decimal == null? 0: decimal);
	var unit = params['unit'];
	var unitBu = params['unitBu']; // 业务单位
	unitBu = (unitBu == null ? '户': unitBu)

	if (dataArray == null || dataArray.length == 0){
		// 返回一个空结构
		return (
		<div className={className==null? "info": className}>
			<div className="first">
				<p className="title"><span></span><label></label></p>
				<p className="value">{unitBu}</p>
			</div>
			<div className="second">
				<p className="title"><span></span><label></label></p>
				<p className="value">{unitBu}</p>
			</div>
			<div className="third">
				<p className="title"><span></span><label></label></p>
				<p className="value">{unitBu}</p>
			</div>
		</div>
		)
	}

	// 合并计算
	var labels = [];// ['两融成交量', '传统成交量']
	var labelValues = {}; // {'两融成交量': [{ "value": 460000000000, "vdate": 1430150400000}, {"value": 460000000000, "vdate": 1430160400000}], 
						  //  "传统成交量": [{"value": 500000000000, "vdate": 1430150400000}, {"value": 500000000000, "vdate": 1430160400000}]}
	for(var i=0; i<dataArray.length; i++){
		var item = dataArray[i];
		if(labels.indexOf(item.label) < 0){
			labels.push(item.label);
			labelValues[item.label] = [];
		}
		labelValues[item.label].push(
			{vdate:item.yyyymmdd, value:item.value}
		)
	}

	// 数据预处理
	prepare(labels, labelValues, sign)

	// 生成 dom 节点
	var total = 0;
	for(var i=0; i<labels.length; i++){
		var label = labels[i];
		// 默认第一个对象是最新的数据
		var value = sliceNoNull(labelValues[label], 0).value;
		labels[i] = [label, value];
		total = total + value;
	}

	var infoList = [];
	for(var i=0; i<labels.length; i++){
		var label = labels[i][0];
		var value = labels[i][1];
		var unitValue = unitFormat(value, unit);
		infoList.push(
			<div className="first">
				<p className="title" style={{color: colors==null?'':colors[i]}}><span></span><label>{label}</label></p>
				<p className="value">{numFixed(unitValue[0],decimal)}{unitValue[1]}{unitBu}</p>
			</div>
		)
	}

	return (
		<div className={className==null? "info": className}>
			{infoList}
		</div>
	)
}

var prepare = function(labels, labelValues, sign){
	
}
var loadingCheckChart = function(status, key, iframe){
	// 检查图形的数据是否loading完成
	if(status == null){
		return iframe;
	}
	if(status[key] == 'FETCHING'){
		return <i className="icon-spinner icon-spin"></i>;
	}
	return iframe;	
}

var ClientMixin = {
	toggleCalendar: function(){
		this.setState({displayCalendar: !this.state.displayCalendar});
	},
	goBackClient: function(event){
		this.setState({disableChart: true});
		this.gotoClient(event);
	},
	renderHeader: function(title, filter){
		filter = (filter == null? []: filter);
		var allType = ['DAY', 'WEEK', 'MONTH', 'QUARTER', 'YEAR'];
		var using = [];
		for(var i=0; i<allType.length; i++){
			var key = allType[i];
			if(filter.indexOf(key) >= 0){
				continue
			}
			using.push(key)
		}
		var choice = [];
		var names = {
			'DAY': '日',
			'WEEK': '周',
			'MONTH': '月',
			'QUARTER': '季',
			'YEAR': '年',
		};
		for(var i=0; i<using.length; i++){
			var key = using[i];
			var className = (this.state.dimdate==key?'now': '');
			if(i == 0){
				className = ('first ' + className);
			}
			else if(i == (using.length -1)){
				className = ('last ' + className);
			}
			choice.push(
 				<span onTouchTap={this.handleDateTypeChoose} data-target={key} className={className}>{names[key]}</span>
			) 
		}
		return (
			<header id="header">
				<div className="header_sort_type">
 					{choice}
	          	</div>
				<span className="back_btn" onTouchTap={this.goBackClient}>
					<i className="icon-angle-left"></i>
					<p id="header-text">{title}</p>
				</span>
			</header>
		);
	},
	renderCalendar: function(date = this.state.enddate){
		var calendar = null;
		if(this.state.displayCalendar == true){
			if(this.state.dimdate == 'DAY' || this.state.dimdate == 'WEEK'){
				calendar = <CVCalendar handleSelect={this.handleSelectDate} curDate={getDateObj(date)}/>;
			}
			else if(this.state.dimdate == 'MONTH' || this.state.dimdate == 'QUARTER' || this.state.dimdate == 'YEAR'){
				calendar = <CVCalendarMonth handleSelect={this.handleSelectDate} curDate={getDateObj(date)}/>;
			}
		}
		
		var endDate = getDateObj(date);
		if(this.state.dimdate == 'MONTH'){
			endDate = endDate.getFullYear() + '年' + (endDate.getMonth() + 1) + '月';
		}
		else if(this.state.dimdate == 'WEEK'){
			var week = getWeekOfMonth(endDate);
			endDate = endDate.getFullYear() + '年' + (endDate.getMonth() + 1) + '月 第' + week + '周';
		}
		else if(this.state.dimdate == 'QUARTER'){
			var quarter = getQuarter(endDate);
			endDate = endDate = endDate.getFullYear() + '年 第' + quarter + '季';
		}
		else if(this.state.dimdate == 'YEAR'){
			endDate = endDate = endDate.getFullYear() + '年';
		}
		else if(this.state.dimdate == 'DAY'){
			endDate = endDate.getFullYear() + '年' + (endDate.getMonth() + 1) + '月' + endDate.getDate() + '日';
		}
		return ([
			<div className="search_date">
				<div className="datetime_input date to_datetime" id="datetimepicker" onTouchTap={this.toggleCalendar}>
					<input name="endDate" type="text" value={endDate} readOnly={true}/>
					<span className="add-on"><i className="icon-th icon-calendar"></i></span>
				</div>
				<div className="name">
					<i className="icon-sitemap"></i><span>平安证券</span>
				</div>
				<div className="line">
					<div className="line"><div className="line"><div className="line">
						<div className="line"></div></div></div>
					</div>
			    </div>
			</div>,
			calendar
		]);
	},
	// componentDidMount: function(){
	// 	ClientDetailActions.fetchData();
	// 	var parent = ReactDOM.findDOMNode(this);
	// 	var parent = $(parent).parent();
	// 	var className = parent.attr('class');
	// 	if(className != 'page_bargain'){
	// 		parent.attr('class', 'page_bargain');
	// 	}
	// },
	endDateToRange: function(dimdate, endDate, save = false){
		var params = {
			dimdate : dimdate,
			apiCollections: this.state.apiCollections
		};
		var fetchData = function(params){
			params['startdate'] = params['startdate'].replace(/\-/g, '');
			params['enddate'] = params['enddate'].replace(/\-/g, '');
			ClientDetailActions.fetchData(params);
		}

		if (dimdate == 'DAY') {
			var callback = function(lastTradingDay, key, data){
				params['enddate'] = getISODate(lastTradingDay);
				if (key + DAY > data.length - 1) {
					var date = new Date(lastTradingDay.getFullYear() - 1, 11,31,12);
					getLastTradingDay(date, function(lastTradingDay, k, d) {
						params['startdate'] = getISODate(d[key +  DAY - data.length]);
						this.setState($.extend(true, {}, params));
						fetchData(params);
					}.bind(this));
				} else {
					params['startdate'] = getISODate(data[key + DAY]);
					this.setState($.extend(true, {}, params));	
					fetchData(params);
				}	
			}.bind(this);
			endDate = new Date(endDate) < new Date() ? endDate : Date();
			getLastTradingDay(new Date(endDate), callback);
		} else {
			var date = getDateStartEndByType(new Date(endDate), dimdate, DAY);

			params['startdate'] = getISODate(date.startdate);
			params['enddate'] = getISODate(date.enddate);
			if (save) {
				this.setState($.extend(true, {}, params));	
			}
			fetchData(params);
		}
	},
	renderRank: function(rank_last, params){
		if(rank_last == null){
			return null;
		}
		
		params = (params == null? {}: params);
		var num = params['num'];
		num = (num == null ? 100 : num);
		var decimal = params['decimal'];
		decimal = (decimal == null ? 3 : decimal);
		var unit = params['unit'];
		var unitBu = params['unitBu']; // 业务单位
		unitBu = (unitBu == null ? '元': unitBu);

		rank_last = rank_last.slice(0, num);
		if (rank_last != null && rank_last.length) {
			var rankList = [];
			rank_last.sort(function(val1, val2) {
				val1.value = val1.value == null ? 0 : val1.value;
				val2.value = val2.value == null ? 0 : val2.value;
				return val2.value - val1.value;
			})
			for (var i = 0; i < rank_last.length; i++) {
				var unitValue = unitFormat(rank_last[i].value, unit);
				var temp = [<td className="title"><span className="num">{i+1}.</span>{rank_last[i].label}</td>,
						<td className="value">
							<div className="progress">
							  <div className="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{width: (rank_last[i].value *100/ rank_last[0].value) + '%'}}>{numFixed(unitValue[0], decimal)}{unitValue[1]}{unitBu}</div>
							</div>
						</td>];
				if (i < 3) {
					var cls = 'n' + (i + 1)
					rankList.push(<tr className={cls}>{temp}</tr>);
				} else {
					rankList.push(<tr>{temp}</tr>);
				}
			}
			return (<span id="barprogress">
				<table>
					<tbody>{rankList}</tbody></table>
			</span>)
		}
	},
}


var PageClientDetail = React.createClass({
	mixins: [History, GOTOMixin, ClientMixin,Reflux.connect(ClientDetailStore, 'data'), HighChartMixin], // Reflux.connect(FundlistStore, "fundlist"),],
	getInitialState: function(){
		var enddate = getISODate(new Date());
		return {
			rankType: 'area', 
			apiCollections: [],
			displayCalendar: false,
			dimdate: 'DAY', // 
			startdate: enddate,
			enddate: enddate,
			disableChart: true, // 禁止渲染图形
		};
	},
    formatData: function(sdata) {
    	if (sdata == null || sdata.length == 0) return [{}];

    	var data = [];
    	var date = {}

    	for (var i = 0; i < sdata.length; i++) {
    		var item = sdata[i];
    		if (!date.hasOwnProperty(item.ex_date)) {
    			date[item.ex_date] = [];
    		}
    		date[item.ex_date].push(
    			{label: item.label, value: item.value}
    		)
    	}
    	for (var d in date) {
    		data.push({ex_date: d, data:date[d]});
    	}
    	data.sort(function(val1, val2) {
    		return val1.ex_date - val2.ex_date;
    	});
    	if (this.state.dimdate != 'DAY') {
    		var lastDate = data[data.length - 1]['ex_date'];
    		var endDate = new Date(this.state.enddate);
    		if (this.state.dimdate == 'WEEK') {
    			var week = getWeekNumber(endDate);
    			if (week == 0) {
    				var temp = new Date(endDate);
    				temp.setDate(-7);
    				week = getWeekNumber(temp) + 1;
    				week = week < 10 ? '0' + week : week;
    				week = temp.getFullYear() + '' + week;
    			} else {
    				week = week < 10 ? '0' + week : week;
    				week = endDate.getFullYear() + '' + week;
    			}
    			
    			console.log(endDate, lastDate, week);

    			if (lastDate != week) {
    				return [{}];
    			}
    		} else if (this.state.dimdate == 'MONTH') {
    			var month = getISODate(endDate).replace(/\-/g,'').substr(0, 6);
    			if (lastDate != month) {
    				return [{}];
    			}
    		} else if (this.state.dimdate == 'QUARTER') {
    			var quarter = endDate.getFullYear() + '0' + getQuarter(endDate);
    			
    			if (lastDate != quarter) {
    				return [{}];
    			}
    		} else if (this.state.dimdate == 'YEAR') {
    			if (lastDate.substr(0,4) != endDate.getFullYear()) {
	    			return [{}];
	    		}
    		}
    	}
    	return data;
    },
    handleSelectDate: function(date) {
		date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12);
		this.endDateToRange(this.state.dimdate, date, true);
		// 1 秒后关闭 calendar
		// setTimeout(function(){
		// 	this.setState({displayCalendar: false});
		// }.bind(this), 1000)
	},
    handleDateTypeChoose: function(event){
		var dimdate = $(event.target).attr('data-target');
		this.setState({
			dimdate: dimdate
		})
		this.endDateToRange(dimdate, this.state.enddate);
	},
    changeType: function(event) {
		var rankType = $(event.target).attr('data-target');
		this.setState({'rankType': rankType});
	},
	getLineChartConfig: function(values, color){
		var config = $.extend(true, {}, lineConfig);
		
		config.renderAt = 'chart';
		if(values == null || values.length == 0)
			return config;
		var dataset = [];
		var category = [];

		if (values[0].ex_date != undefined) {
			var temp = {};
			for (var i = 0; i < values.length; i++) {
				var item = values[i];
				category.push({'label': item.ex_date});
				for (var j = 0; j < item.data.length; j++) {
					var item1 = item.data[j];
					if (!temp.hasOwnProperty(item1.label)) {
						temp[item1.label] = [];
					}
					item1.value = item1.value == null ? 0 : item1.value;
					temp[item1.label].push({'value': item1.value});
				}
			}
		}
		for (var item in temp) {
			dataset.push({seriesname: item, data: temp[item]});
		}

		config['dataSource']['categories'][0]['category'] = category;
		config['dataSource']['dataset'] = dataset;
		config.height = 256;
		if(color == null){
			color = '#ffffff';
		}
		config.dataSource.chart.bgcolor = color;
		config.dataSource.chart.bgAlpha = "100";
		config.dataSource.chart.labelStep = 1;

		return config;
	},

	getPieChartConfig: function(values, color){
		// values: [{label:xxx, value:xxx}, {label:xxx, value:xxx}]
		var config = $.extend(true, {}, pie2DConfig);
		config.renderAt = 'chart';
		if(values == null || values.length == 0)
			return config;
		var data = values;
		config['dataSource']['data'] = data;
		config.height = 100;
		if(color == null){
			color = '#ffffff';
		}
		config.dataSource.chart.bgcolor = color;
		config.dataSource.chart.bgAlpha = "100";
		config.dataSource.chart.pieRadius = "40";
		return config;
	},

	componentDidMount: function(){
		var params = {
			'startdate': this.state.startdate,
			'enddate': this.state.enddate,
			'dimdate': this.state.dimdate
		};
		var callback = function(lastTradingDay, key, data){
			params['startdate'] = getISODate(lastTradingDay);
			params['enddate'] = getISODate(lastTradingDay);
			if (key + DAY > data.length - 1) {
				var date = new Date(lastTradingDay.getFullYear() - 1, 11,31,12);
				getLastTradingDay(date, function(lastTradingDay, k, d) {
					params['startdate'] = getISODate(d[key +  DAY - data.length]);
				}.bind(this));
			} else {
				params['startdate'] = getISODate(data[key + DAY]);
			}
			if(this.props.location.query.page == 'TOTAL'){
				params['apiCollections'] = ["customer"];
			}
			else if(this.props.location.query.page == 'KHS'){
				params['apiCollections'] = ["newacct"];
			}
			else if(this.props.location.query.page == 'XZYXH'){
				params['apiCollections'] = ["newcust"];
			}
			else if(this.props.location.query.page == 'XZCFQY'){
				params['apiCollections'] = ["newcon"];
			}
			else if(this.props.location.query.page == 'XZZCS'){
				params['apiCollections'] = ["newasset"];
			}
			else if(this.props.location.query.page == 'XHS'){
				params['apiCollections'] = ["closeacc"];
			}
			else if(this.props.location.query.page == 'LSZC'){
				params['apiCollections'] = ["lostass"];
			}
			else if(this.props.location.query.page == 'CLZC'){
				params['apiCollections'] = ["asset"];
			}
		}.bind(this);

		getLastTradingDay(new Date(params['enddate']), callback);
		this.setState(params);
		ClientDetailActions.fetchData({
			dimdate: params['dimdate'],
			apiCollections: params['apiCollections'],
			startdate: params['startdate'].replace(/\-/g, ''),
			enddate: params['enddate'].replace(/\-/g, '')
		});

		// 500ms 后启用图形渲染
		setTimeout(function(){this.setState({disableChart: false})}.bind(this), 500);	
	},

	onDisplayCalendar: function(){
		this.setState({displayCalendar: !this.state.displayCalendar})
	},
	render: function(){
		if(this.props.location.query.page == 'TOTAL'){
			return this.renderTotal();
		}
		else if(this.props.location.query.page == 'KHS'){
			return this.renderKHS();
		}
		else if(this.props.location.query.page == 'XZYXH'){
			return this.renderXZYXH();
		}
		else if(this.props.location.query.page == 'XZCFQY'){
			return this.renderXZCFQY();
		}
		else if(this.props.location.query.page == 'XZZCS'){
			return this.renderXZZCS();
		}
		else if(this.props.location.query.page == 'XHS'){
			return this.renderXHS();
		}
		else if(this.props.location.query.page == 'LSZC'){
			return this.renderLSZCS();
		}
		else if(this.props.location.query.page == 'CLZC'){
			return this.renderCLZCS();
		}
	},
	renderTotal: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_customer_volumes = _.get(this.state.data, 'ds_customer_volumes', {value: []}).value;
		var lds_data = ds_customer_volumes.map(function(val) {
			return {label: val.label, value: val.value/10000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_customer_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		var ds_rank;
		
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_customer_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_customer_area_rank', {value: []}).value;
		}
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configPie = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_customer_volumes');
		// this.addChart('chart-customer-pie', configPie);
//		var jsonConfigTotal = encodeURIComponent(JSON.stringify(configTotal));
//		var chartTotal = (<iframe src={"./chart.html?data="+jsonConfigTotal} height={parseInt(configTotal.height) + 4} width="100%" style={{border:"none", backgroundColor: configTotal.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartTotal = loadingCheckChart(status, 'ds_customer_volumes', chartTotal);

		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '万'});
		configLine.xAxis.title.text = '单位(万)';
		// configLine.dataSource.chart.xAxisName = "单位(万)";
		// configLine.dataSource.chart.numberPrefix = "";
		var loadingLine = loadingCheckChart1(status, 'ds_customer_volumes');
		// this.addChart('chart-customer-line', configLine);
	
		// var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
		// var chartLineTotal = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLineTotal = loadingCheckChart(status, 'ds_customer_volumes', chartLineTotal);


		return (
			<div id="container" className="container">
				{this.renderHeader('总客户（存量）', ['DAY', 'WEEK', 'MONTH', 'QUARTER', 'YEAR'])}
				<IScroll>
				<div id="page_main">
					<div className="page_detail_model">
						{this.renderCalendar(cal_date)}
						<div className="base_main">
							<div className="mid_info">
								<div className="chart">
									<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-customer-pie">
										{this.state.disableChart==true ? null: this.getHighChart(configPie)}
									</span>
								{loadingPie}
							</div>

								{zbCal(chart_data, {colors:getColors(), decimal: 2, unit: '万'})}
							</div>
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-customer-line">
									{this.state.disableChart==true ? null: this.getHighChart(configLine)}
								</span>
								{loadingLine}
							</div>
						</div>
						<div className="btm_main">
							<div className="title_main">
								<div className="sort_type">
									<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                		<span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			          			</div>
								<div className="title">
									<i className="icon-flag"></i>
									<span>排名情况</span>
								</div>
							</div>
							{this.renderRank(rank_last, {unit: '万', unitBu: '户'})}
						</div>
					</div>
				</div>
				</IScroll>
			</div>
			)
		}
	,
	renderKHS: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_newacct_volumes = _.get(this.state.data, 'ds_newacct_volumes', {value: []}).value;

		var lds_data = ds_newacct_volumes.map(function(val) {
			return {label: val.label, value: val.value/10000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_newacct_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];

		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		// var configPie = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_newacct_volumes');
		// this.addChart('chart-newacct-pie', configPie);
		// var jsonConfigKHS = encodeURIComponent(JSON.stringify(configKHS));
		// var chartKHS = (<iframe src={"./chart.html?data="+jsonConfigKHS} height={parseInt(configKHS.height) + 4} width="100%" style={{border:"none", backgroundColor: configKHS.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartKHS = loadingCheckChart(status, 'ds_newacct_volumes', chartKHS);

		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '万'});
		configLine.xAxis.title.text = "单位(万)";
		// configLine.dataSource.chart.xAxisName = "单位(万)";
		// configLine.dataSource.chart.numberPrefix = "";
		var loadingLine = loadingCheckChart1(status, 'ds_newacct_volumes');
		// this.addChart('chart-newacct-line', configLine);
	
		// var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
		// var chartLineKHS = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLineKHS = loadingCheckChart(status, 'ds_newacct_volumes', chartLineKHS);


		var ds_rank;
		
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_newacct_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_newacct_area_rank', {value: []}).value;
		}
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		return (
			<div id="container" className="container">
				{this.renderHeader('开户数')}
				<IScroll>
				<div id="page_main">
					<div className="page_detail_model">
						{this.renderCalendar(cal_date)}
						<div className="base_main">
							<div className="mid_info">
								<div className="chart">
									<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-newacct-pie">
									{this.state.disableChart==true ? null: this.getHighChart(configPie)}
									</span>
								{loadingPie}
							</div>
								{zbCal(chart_data, {unit:'', colors:getColors()})}
							</div>
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-newacct-line">
									{this.state.disableChart==true ? null: this.getHighChart(configLine)}
								</span>
								{loadingLine}
							</div>
						</div>

						<div className="btm_main">
							<div className="title_main">
								<div className="sort_type">
									<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                		<span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			          			</div>
								<div className="title">
									<i className="icon-flag"></i>
									<span>排名情况</span>
								</div>
							</div>
							{this.renderRank(rank_last, {unit:'', unitBu:'户', decimal: 0})}
						</div>

					</div>
				</div>
				</IScroll>
			</div>
		)
	},
	renderXZYXH: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_newcust_volumes = _.get(this.state.data, 'ds_newcust_volumes', {value: []}).value;

		var ds_data = this.formatData(ds_newcust_volumes);
		var lds_data = ds_data.slice();
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		// var configPie = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_newcust_volumes');
		// this.addChart('chart-newcust-pie', configPie);
		// var jsonConfigXZYXH = encodeURIComponent(JSON.stringify(configXZYXH));
		// var chartXZYXH = (<iframe src={"./chart.html?data="+jsonConfigXZYXH} height={parseInt(configXZYXH.height) + 4} width="100%" style={{border:"none", backgroundColor: configXZYXH.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartXZYXH = loadingCheckChart(status, 'ds_newcust_volumes', chartXZYXH);

		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '户'})
		configLine.xAxis.title.text = '单位(户)';
		var loadingLine = loadingCheckChart1(status, 'ds_newcust_volumes');
		// this.addChart('chart-newcust-line', configLine);
		// var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
		// var chartLineXZYXH = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLineXZYXH = loadingCheckChart(status, 'ds_newcust_volumes', chartLineXZYXH);

		var ds_rank;
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_newcust_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_newcust_area_rank', {value: []}).value;
		}
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		return (
			<div id="container" className="container">
				{this.renderHeader('新增有效户')}
				<IScroll>
				<div id="page_main">
					<div className="page_detail_model">
						{this.renderCalendar(cal_date)}
						<div className="base_main">
							<div className="mid_info">
								<div className="chart">
									<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-newcust-pie">
										{this.state.disableChart==true ? null: this.getHighChart(configPie)}
									</span>
									{loadingPie}
								</div>
								{zbCal(chart_data, {unit:'', colors:getColors()})}
							</div>
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-newcust-line">
									{this.state.disableChart==true ? null: this.getHighChart(configLine)}
								</span>
								{loadingLine}
							</div>
						</div>

						<div className="btm_main">
							<div className="title_main">
								<div className="sort_type">
									<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                		<span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			          			</div>
								<div className="title">
									<i className="icon-flag"></i>
									<span>排名情况</span>
								</div>
							</div>
							{this.renderRank(rank_last, {unit:'', unitBu:'户', decimal: 0})}
						</div>

					</div>
				</div>
				</IScroll>
			</div>
				)
				}
	,
	renderXZCFQY: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_newcon_volumes = _.get(this.state.data, 'ds_newcon_volumes', {value: []}).value;

		var ds_data = this.formatData(ds_newcon_volumes);
		var lds_data = ds_data.slice();
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
	
		// var configPie = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_newcon_volumes');
		// this.addChart('chart-newcon-pie', configPie);
		// var jsonConfigXZCFQY = encodeURIComponent(JSON.stringify(configXZCFQY));
		// var chartXZCFQY = (<iframe src={"./chart.html?data="+jsonConfigXZCFQY} height={parseInt(configXZCFQY.height) + 4} width="100%" style={{border:"none", backgroundColor: configXZCFQY.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartXZCFQY = loadingCheckChart(status, 'ds_newcon_volumes', chartXZCFQY);

		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '户'});
		configLine.xAxis.title.text = '单位(户)';
		var loadingLine = loadingCheckChart1(status, 'ds_newcon_volumes');
		// this.addChart('chart-newcon-line', configLine);
		// var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
		// var chartLineXZCFQY = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLineXZCFQY = loadingCheckChart(status, 'ds_newcon_volumes', chartLineXZCFQY);

		// var ds_rank;
		// if (this.state.rankType == 'brch') {
		// 	ds_rank = _.get(this.state.data, 'ds_newcon_brch_rank', {value: []}).value;
		// } else if (this.state.rankType == 'area') {
		//  	ds_rank = _.get(this.state.data, 'ds_newcon_area_rank', {value: []}).value;
		// }
		// ds_rank = this.formatData(ds_rank);
		// var rank_last = ds_rank.reverse()[0]['data'];

		return (
			<div id="container" className="container">
				{this.renderHeader('新增财富签约数')}
				<IScroll>
				<div id="page_main">
					<div className="page_detail_model">
						{this.renderCalendar(cal_date)}
						<div className="base_main">
							<div className="mid_info">
								<div className="chart">
									<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-newcon-pie">
										{this.state.disableChart==true ? null: this.getHighChart(configPie)}
									</span>
									{loadingPie}
								</div>
								{zbCal(chart_data, {unit:'', colors:getColors()})}
							</div>
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-newcon-line">
									{this.state.disableChart==true ? null: this.getHighChart(configLine)}
								</span>
								{loadingLine}
							</div>
						</div>

					</div>
				</div>
				</IScroll>
			</div>
		)
	}
	,
	renderXZZCS: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_newasset_volumes = _.get(this.state.data, 'ds_newasset_volumes', {value: []}).value;
		var lds_data = ds_newasset_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_newasset_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
	
		var ds_rank;
		
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_newasset_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_newasset_area_rank', {value: []}).value;
		}
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configPie = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_newasset_volumes');
		// this.addChart('chart-newasset-pie', configPie);
		// var jsonConfigXZZCS = encodeURIComponent(JSON.stringify(configXZZCS));
		// var chartXZZCS = (<iframe src={"./chart.html?data="+jsonConfigXZZCS} height={parseInt(configXZZCS.height) + 4} width="100%" style={{border:"none", backgroundColor: configXZZCS.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartXZZCS = loadingCheckChart(status, 'ds_newasset_volumes', chartXZZCS);

		// var configLine = this.getLineChartConfig(lds_data);
		// configLine.dataSource.chart.xAxisName = "单位(亿)";
		// configLine.dataSource.chart.numberPrefix = "";
		// configLine.height = 290;
		var configLine = this.getHLineConfig(lds_data, {unit: '亿'});
		configLine.xAxis.title.text = '单位(亿)';
		var loadingLine = loadingCheckChart1(status, 'ds_newasset_volumes');
		// this.addChart('chart-newasset-line', configLine);
	
		// var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
		// var chartLineXZZCS = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLineXZZCS = loadingCheckChart(status, 'ds_newasset_volumes', chartLineXZZCS);

		return (
			<div id="container" className="container">
				{this.renderHeader('新增资产数')}
				<IScroll>
				<div id="page_main">
					<div className="page_detail_model">
						{this.renderCalendar(cal_date)}
						<div className="base_main">
							<div className="mid_info">
								<div className="chart">
									<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-newasset-pie">
										{this.state.disableChart==true ? null: this.getHighChart(configPie)}
									</span>
									{loadingPie}
								</div>
								{zbCal(chart_data, {unit:'亿', colors:getColors(), unitBu: '元', decimal: 2})}
							</div>
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-newasset-line">
									{this.state.disableChart==true ? null: this.getHighChart(configLine)}
								</span>
								{loadingLine}
							</div>
						</div>
						<div className="btm_main">
							<div className="title_main">
								<div className="sort_type">
									<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                		<span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>																
								</div>
								<div className="title">
									<i className="icon-flag"></i>
									<span>排名情况</span>
								</div>
							</div>
							{this.renderRank(rank_last)}
						</div>
					</div>
				</div>
				</IScroll>
			</div>
		)
	}
	,
	renderXHS: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_closeacc_volumes = _.get(this.state.data, 'ds_closeacc_volumes', {value: []}).value;
		var ds_data = this.formatData(ds_closeacc_volumes);
		var lds_data = ds_data.slice();
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		var ds_rank;
		
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_closeacc_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_closeacc_area_rank', {value: []}).value;
		}
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configPie = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_closeacc_volumes');
		// this.addChart('chart-closeacc-pie', configPie);
		// var jsonConfigXHS = encodeURIComponent(JSON.stringify(configXHS));
		// var chartXHS = (<iframe src={"./chart.html?data="+jsonConfigXHS} height={parseInt(configXHS.height) + 4} width="100%" style={{border:"none", backgroundColor: configXHS.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartXHS = loadingCheckChart(status, 'ds_closeacc_volumes', chartXHS);


		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '户'});
		configLine.xAxis.title.text = '单位(户)'
		var loadingLine = loadingCheckChart1(status, 'ds_closeacc_volumes');
		// this.addChart('chart-closeacc-line', configLine);
		// var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
		// var chartLineXHS = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLineXHS = loadingCheckChart(status, 'ds_closeacc_volumes', chartLineXHS);

		return (
			<div id="container" className="container">
				{this.renderHeader('销户数')}
				<IScroll>
				<div id="page_main">
					<div className="page_detail_model">
						{this.renderCalendar(cal_date)}
						<div className="base_main">
							<div className="mid_info">
								<div className="chart">
									<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-closeacc-pie">
										{this.state.disableChart==true ? null: this.getHighChart(configPie)}
									</span>
									{loadingPie}
								</div>
								{zbCal(chart_data, {unit:'', colors:getColors()})}
							</div>
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-closeacc-line">
									{this.state.disableChart==true ? null: this.getHighChart(configLine)}
								</span>
								{loadingLine}
							</div>
						</div>
						<div className="btm_main">
							<div className="title_main">
								<div className="sort_type">
									<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                		<span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>								
								</div>
								<div className="title">
									<i className="icon-flag"></i>
									<span>排名情况</span>
								</div>
							</div>
							{this.renderRank(rank_last, {unitBu:'户', unit:'', decimal: 0})}
						</div>
					</div>
				</div>
				</IScroll>
			</div>
		)
	}
	,
	renderLSZCS: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_lostass_volumes = _.get(this.state.data, 'ds_lostass_volumes', {value: []}).value;
		var lds_data = ds_lostass_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);
		var ds_data = this.formatData(ds_lostass_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
	
		var ds_rank;
		
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_lostass_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_lostass_area_rank', {value: []}).value;
		}

		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configPie = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_lostass_volumes');
		// this.addChart('chart-lostass-pie', configPie);
		// var jsonConfigLSZCS = encodeURIComponent(JSON.stringify(configLSZCS));
		// var chartLSZCS = (<iframe src={"./chart.html?data="+jsonConfigLSZCS} height={parseInt(configLSZCS.height) + 4} width="100%" style={{border:"none", backgroundColor: configLSZCS.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLSZCS = loadingCheckChart(status, 'ds_lostass_volumes', chartLSZCS);

		// var configLine = this.getLineChartConfig(lds_data);
		// configLine.dataSource.chart.xAxisName = "单位(亿)";
		// configLine.dataSource.chart.numberPrefix = "";
		// configLine.height = 290;
		var configLine = this.getHLineConfig(lds_data, {unit: '亿'});
		configLine.xAxis.title.text = '单位(亿)';
		var loadingLine = loadingCheckChart1(status, 'ds_lostass_volumes');
		// this.addChart('chart-lostass-line', configLine);
		// var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
		// var chartLineLSZCS = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLineLSZCS = loadingCheckChart(status, 'ds_lostass_volumes', chartLineLSZCS);


		return (
			<div id="container" className="container">
				{this.renderHeader('流失资产数')}
				<IScroll>
				<div id="page_main">
					<div className="page_detail_model">
						{this.renderCalendar(cal_date)}
						<div className="base_main">
							<div className="mid_info">
								<div className="chart">
									<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-lostass-pie">
										{this.state.disableChart==true ? null: this.getHighChart(configPie)}
									</span>
									{loadingPie}
								</div>
								{zbCal(chart_data, {unitBu:'元', colors:getColors(), unit:'万', decimal:2})}
							</div>
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-lostass-line">
									{this.state.disableChart==true ? null: this.getHighChart(configLine)}
								</span>
								{loadingLine}
							</div>
						</div>
						<div className="btm_main">
							<div className="title_main">
								<div className="sort_type">
									<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                		<span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
								</div>
								<div className="title">
									<i className="icon-flag"></i>
									<span>排名情况</span>
								</div>
							</div>
							{this.renderRank(rank_last)}
						</div>
					</div>
				</div>
				</IScroll>
			</div>
		)
	}
	,
	renderCLZCS: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_asset_volumes = _.get(this.state.data, 'ds_asset_volumes', {value: []}).value;
		var lds_data = ds_asset_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);
		var ds_data = this.formatData(ds_asset_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
	
		var ds_rank;
		
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_asset_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_asset_area_rank', {value: []}).value;
		}
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configPie = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_asset_volumes');
		// this.addChart('chart-asset-pie', configPie);
		// var jsonConfigCLZCS = encodeURIComponent(JSON.stringify(configCLZCS));
		// var chartCLZCS = (<iframe src={"./chart.html?data="+jsonConfigCLZCS} height={parseInt(configCLZCS.height) + 4} width="100%" style={{border:"none", backgroundColor: configCLZCS.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartCLZCS = loadingCheckChart(status, 'ds_asset_volumes', chartCLZCS);
		
		var configLine = this.getHLineConfig(lds_data, {unit: '亿'});
		configLine.xAxis.title.text = '单位(亿)';
		// var configLine = this.getLineChartConfig(lds_data);
		// configLine.dataSource.chart.xAxisName = "单位(亿)";
		// configLine.dataSource.chart.numberPrefix = "";
		// configLine.height = 290;
		var loadingLine = loadingCheckChart1(status, 'ds_comr_volumes');
		// this.addChart('chart-asset-line', configLine);
		// var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
		// var chartLineCLZCS = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartLineCLZCS = loadingCheckChart(status, 'ds_asset_volumes', chartLineCLZCS);

		return (
			<div id="container" className="container">
				{this.renderHeader('存量资产数', ['DAY', 'WEEK', 'MONTH', 'QUARTER', 'YEAR'])}
				<IScroll>
				<div id="page_main">
					<div className="page_detail_model">
						{this.renderCalendar(cal_date)}
						<div className="base_main">
							<div className="mid_info">
								<div className="chart">
									<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-asset-pie">
										{this.state.disableChart==true ? null: this.getHighChart(configPie)}
									</span>
									{loadingPie}
								</div>
								{zbCal(chart_data, {unitBu:'元', colors:getColors(), unit:'亿', decimal:2})}
							</div>
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-asset-line">
									{this.state.disableChart==true ? null: this.getHighChart(configLine)}
								</span>
								{loadingLine}
							</div>
						</div>
						<div className="btm_main">
							<div className="title_main">
								<div className="sort_type">
									<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                		<span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			          			</div>
								<div className="title">
									<i className="icon-flag"></i>
									<span>排名情况</span>
								</div>
							</div>
							{this.renderRank(rank_last)}
						</div>
					</div>
				</div>
				</IScroll>
			</div>
		)
	}
});

export { PageClientDetail }